<template>
  <el-card>
    <!-- 搜索和添加 -->
    <!-- gutter每列之间的间隔 槽宽 -->
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input placeholder="用户名" class="input-with-select"></el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="电话" class="input-with-select"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">查询</el-button>
      </el-col>
    </el-row>
    <!-- 用户信息表格-->
    <el-table :data="tableData" border stripe>
      <el-table-column prop="id" label="用户ID"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="status" label="用户状态"> </el-table-column>
      <el-table-column prop="email" label="电子邮箱"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 页脚 -->
    <div class="block">
      <span class="demonstration">直接前往</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "1",
          username: "admin",
          phone: "12345678901",
          status: "正常 ",
          email: "6784827@163.com ",
        },
        {
          id: "2",
          username: "test",
          phone: "12345678888",
          status: "正常 ",
          email: "22222222@163.com ",
        },
        {
          id: "3",
          username: "tt",
          phone: "12345678999",
          status: "正常 ",
          email: "67666666@163.com ",
        },
        {
          id: "4",
          username: "abc",
          phone: "12345677777",
          status: "正常 ",
          email: "77777777@163.com ",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(id, row);
    },
    handleDelete(index, row) {
      console.log(id, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style>
.el-table {
  margin-top: 15px;
  font-size: 12px;
}
.el-pagination{
  display: inline-block;
  position: relative;
  margin-top: 10px;
}
</style>
